<%@page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/static/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/static/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="/static/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
	jQuery(function ($) {
			var html ="";
			$.ajax({
				url:"/type/getDictionaryType.do",
				success:function (data) {
					//页面加载：
					$.each(data,function (i,type) {
						html +='<tr class="active">' +
								'<td><input type="checkbox" name="chk" value="'+type.code+'" /></td>'+
								'<td>'+(i+1)+'</td>'+
								'<td>'+type.code+'</td>'+
								'<td>'+type.name+'</td>'+
								'<td>'+type.description+'</td>';

							$("#tbody").html(html)
					})


				}
			});

			//编辑功能：
		$("#edit").click(function () {
			var count =0;
			var code ="";
			//获取多选框被选中的值
			$(":input[name=chk]").each(function () {//获取所有多选框并遍历

				if(this.checked){//表示当前对象的checked为true
					count++;
					code = this.value;

				}
			});
			if(count !==1){
				alert("请选择一项修改项！")
				return;
			}

			location="/type/edit.do?code="+code
		});


		//实现全选按钮功能
		$("#chkAll").click(function () {
			$(":checkbox[name=chk]").prop("checked",this.checked)
		})
		//子复选框影响全选按钮:因为是通过 ajax 加载的页面，页面内容的功能，只能通过委托父类标签实现
		$("#tbody").on("click","input[name=chk]",function () {
			$("#chkAll").prop("checked",$(":checkbox[name=chk]").size()==$(":checkbox[name=chk]:checked").size())
		});



		//删除功能:通过获取多选框选中被选中的value来实现
		$("#del").click(function () {
			var arr ="";
			var codes = $(":checkbox[name=chk]:checked").map(function (value) {
						return this.value
			}).get();//这获取的就是一个被选中的数组，可以是一个，也可以是多个

			//查询要删除的type的code是否被typeValue表引用:如果被引用，则提示不能删除！
			$.ajax({
				url:"/type/checkTypeCode.do?codes="+codes.join(","),//加入join(",")为必要，使得每个字符串之间间隔,
				async: false,//因为ajax是异步请求，所以要选择同步请求，这样才能给全局变量赋值，才能提示我们需要给的数据
				success(data){

					//遍历返回的数据data，如果data中有包含codes数组中的数据，提示用户不能删除
					for(var i=0;i < data.length;i++){//遍历data,通过数据库查询到的值
						for (var j = 0; j < codes.length; j++) {//遍历codes，遍历要删除的值
							if(data[i]===codes[j]){
								arr +=":"+data[i]//如果相等，我们就赋值给arr，这个字符串，就是我们要展示给用户的
							}
						}
					}


				}
			});
			if(arr){
				alert(arr+"字典编码禁止删除！");//提示用户不能够删除
				return;
			}

			if(!codes){
				alert("请选择删除项");
				return
			}

			location ="/type/delType.do?codes="+codes.join(",");
		})




	})
</script>
</head>
<body>

	<div>
		<div style="position: relative; left: 30px; top: -10px;">
			<div class="page-header">
				<h3>字典类型列表</h3>
			</div>
		</div>
	</div>
	<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px;">
		<div class="btn-group" style="position: relative; top: 18%;">
		  <button type="button" class="btn btn-primary" onclick="window.location.href='save.html'"><span class="glyphicon glyphicon-plus"></span> 创建</button>
		  <button id="edit" type="button" class="btn btn-default" ><span class="glyphicon glyphicon-edit"></span> 编辑</button>
		  <button id="del" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
		</div>
	</div>
	<div style="position: relative; left: 30px; top: 20px;">
		<table class="table table-hover">
			<thead>
				<tr style="color: #B3B3B3;">
					<td><input type="checkbox" id="chkAll" /></td>
					<td>序号</td>
					<td>编码</td>
					<td>名称</td>
					<td>描述</td>
				</tr>
			</thead>
			<tbody id="tbody">

			</tbody>
		</table>
	</div>
	
</body>
</html>